<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>模型性能 - 转炉终点预测系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="styles/unified.css">
    <link rel="stylesheet" href="styles/components.css">
    <link rel="stylesheet" href="styles/sidebar-theme.css">
    <link rel="stylesheet" href="styles/model-pages.css">
    <link rel="stylesheet" href="styles/scale-fix.css">
    <link rel="stylesheet" href="styles/modal-dialog.css">
</head>
<body>
    <!-- 侧边栏 -->
    <div class="sidebar">
        <div class="sidebar-header">
            <div class="sidebar-logo">
                <i class="fas fa-industry"></i>
            </div>
            <div class="sidebar-title">转炉终点预测系统</div>
        </div>
        <div class="sidebar-menu">
            <div class="sidebar-menu-title">主导航</div>
            <ul>
                <li><a href="index.html"><i class="fas fa-home"></i>首页</a></li>
                
                <li><a href="production-monitor.html"><i class="fas fa-chart-line"></i>生产监控</a></li>
                <li><a href="history-data.html"><i class="fas fa-history"></i>历史数据</a></li>
                <li><a href="quality-analysis.html"><i class="fas fa-flask"></i>质量分析</a></li>
            </ul>
            
            <div class="sidebar-menu-title">模型管理</div>
            <ul>
                <li><a href="model-details.html"><i class="fas fa-brain"></i>模型详情</a></li>
                <li><a href="model-config.html"><i class="fas fa-cogs"></i>模型配置</a></li>
                <li><a href="model-performance.html" class="active"><i class="fas fa-chart-bar"></i>模型性能</a></li>
                <li><a href="model-update.html"><i class="fas fa-sync-alt"></i>模型更新</a></li>
            </ul>
            
            <div class="sidebar-menu-title">系统设置</div>
            <ul>
                <li><a href="system-settings.html"><i class="fas fa-cog"></i>系统设置</a></li>
                <li><a href="online-analysis.html"><i class="fas fa-chart-bar"></i>在线分析</a></li>
            </ul>
        </div>
        <div class="sidebar-footer">
            <i class="fas fa-info-circle"></i>
            <span>系统版本：v2.5.3</span>
        </div>
    </div>

    <!-- 侧边栏遮罩层 -->
    <div class="sidebar-overlay"></div>

    <div class="container">
        <div class="header">
            <div class="header-left">
                <div>
                    <div class="title">模型性能</div>
                    <div class="subtitle">查看和分析模型性能指标</div>
                </div>
            </div>
            <div class="header-right">
                <div class="header-icon">
                    <i class="fas fa-search"></i>
                </div>
                <div class="header-icon">
                    <i class="fas fa-bell"></i>
                    <span class="notification-badge">3</span>
                </div>
                <div class="dropdown">
                    <div class="user-dropdown dropdown-trigger">
                        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="用户头像" class="user-avatar">
                        <span class="user-name">工程师</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="dropdown-menu">
                        <a href="#" class="dropdown-item">
                            <i class="fas fa-user"></i>
                            <span>个人资料</span>
                        </a>
                        <a href="#" class="dropdown-item">
                            <i class="fas fa-cog"></i>
                            <span>账号设置</span>
                        </a>
                        <a href="#" class="dropdown-item">
                            <i class="fas fa-question-circle"></i>
                            <span>帮助中心</span>
                        </a>
                        <a href="login.html" class="dropdown-item">
                            <i class="fas fa-sign-out-alt"></i>
                            <span>退出登录</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="dataset-selector">
                <button class="dataset-btn active" data-dataset="test">测试集</button>
                <button class="dataset-btn" data-dataset="validation">验证集</button>
                <button class="dataset-btn" data-dataset="production">生产数据</button>
            </div>
        </div>

        <div class="content-wrapper">
            <!-- 核心指标卡片 -->
            <div class="metrics-container">
                <div class="metric-card">
                    <div class="metric-icon">
                        <i class="fas fa-thermometer-half"></i>
                    </div>
                    <div class="metric-value">±8.63℃</div>
                    <div class="metric-label">温度预测RMSE</div>
                    <div class="metric-trend up">
                        <i class="fas fa-arrow-up"></i>
                        较上版本提升12.3%
                    </div>
                </div>
                <div class="metric-card">
                    <div class="metric-icon">
                        <i class="fas fa-atom"></i>
                    </div>
                    <div class="metric-value">±0.0076%</div>
                    <div class="metric-label">碳含量预测RMSE</div>
                    <div class="metric-trend up">
                        <i class="fas fa-arrow-up"></i>
                        较上版本提升8.5%
                    </div>
                </div>
                <div class="metric-card">
                    <div class="metric-icon">
                        <i class="far fa-clock"></i>
                    </div>
                    <div class="metric-value">92.4%</div>
                    <div class="metric-label">时间预测准确率</div>
                    <div class="metric-trend up">
                        <i class="fas fa-arrow-up"></i>
                        较上版本提升5.2%
                    </div>
                </div>
                <div class="metric-card">
                    <div class="metric-icon">
                        <i class="fas fa-bolt"></i>
                    </div>
                    <div class="metric-value">120ms</div>
                    <div class="metric-label">平均推理时间</div>
                    <div class="metric-trend down">
                        <i class="fas fa-arrow-down"></i>
                        较上版本降低35%
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <div class="card-title">
                        <i class="fas fa-chart-line"></i>
                        模型预测性能
                    </div>
                    <div class="card-actions">
                        <button class="btn btn-secondary">
                            <i class="fas fa-download"></i>
                            导出报告
                        </button>
                    </div>
                </div>

                <div class="tabs">
                    <button class="tab-btn active" data-tab="temperature">温度预测</button>
                    <button class="tab-btn" data-tab="carbon">碳含量预测</button>
                    <button class="tab-btn" data-tab="time">时间预测</button>
                    <button class="tab-btn" data-tab="overall">综合性能</button>
                </div>

                <!-- 温度预测选项卡 -->
                <div class="tab-content active" id="temperature-tab">
                    <div class="chart-container">
                        <div class="chart-placeholder">
                            <i class="fas fa-chart-line" style="font-size: 2rem; margin-bottom: 10px; color: var(--primary-color);"></i>
                            <div>温度预测实际值与预测值对比图</div>
                            <div style="margin-top: 5px; font-size: 0.9rem; color: var(--gray);">
                                X轴: 样本序号 | Y轴: 温度值(℃) | 蓝线: 预测值 | 灰线: 实际值
                            </div>
                        </div>
                    </div>
                    
                    <div class="chart-title">
                        <i class="fas fa-chart-bar"></i>
                        预测误差分布
                    </div>
                    <div class="error-distribution">
                        <div class="error-item">
                            <div class="error-range">< 5℃</div>
                            <div class="error-bar-container">
                                <div class="error-bar" style="width: 68%"></div>
                            </div>
                            <div class="error-value">68%</div>
                        </div>
                        <div class="error-item">
                            <div class="error-range">5℃ - 10℃</div>
                            <div class="error-bar-container">
                                <div class="error-bar" style="width: 23%"></div>
                            </div>
                            <div class="error-value">23%</div>
                        </div>
                        <div class="error-item">
                            <div class="error-range">10℃ - 15℃</div>
                            <div class="error-bar-container">
                                <div class="error-bar" style="width: 6%"></div>
                            </div>
                            <div class="error-value">6%</div>
                        </div>
                        <div class="error-item">
                            <div class="error-range">15℃ - 20℃</div>
                            <div class="error-bar-container">
                                <div class="error-bar" style="width: 2%"></div>
                            </div>
                            <div class="error-value">2%</div>
                        </div>
                        <div class="error-item">
                            <div class="error-range">> 20℃</div>
                            <div class="error-bar-container">
                                <div class="error-bar" style="width: 1%"></div>
                            </div>
                            <div class="error-value">1%</div>
                        </div>
                    </div>
                    
                    <div class="grid-2">
                        <div>
                            <div class="chart-title">
                                <i class="fas fa-table"></i>
                                详细指标
                            </div>
                            <table class="performance-table">
                                <thead>
                                    <tr>
                                        <th>指标</th>
                                        <th>值</th>
                                        <th>同比</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>MAE</td>
                                        <td>6.72℃</td>
                                        <td style="color: var(--success-color);">↑11.2%</td>
                                    </tr>
                                    <tr>
                                        <td>RMSE</td>
                                        <td>8.63℃</td>
                                        <td style="color: var(--success-color);">↑12.3%</td>
                                    </tr>
                                    <tr>
                                        <td>R²</td>
                                        <td>0.876</td>
                                        <td style="color: var(--success-color);">↑5.8%</td>
                                    </tr>
                                    <tr>
                                        <td>±10℃内准确率</td>
                                        <td>91%</td>
                                        <td style="color: var(--success-color);">↑7.5%</td>
                                    </tr>
                                    <tr>
                                        <td>±5℃内准确率</td>
                                        <td>68%</td>
                                        <td style="color: var(--success-color);">↑14.2%</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div>
                            <div class="chart-title">
                                <i class="fas fa-chart-area"></i>
                                误差热力图
                            </div>
                            <div class="chart-container" style="height: 200px;">
                                <div class="chart-placeholder">
                                    <div>温度预测误差热力图</div>
                                    <div style="margin-top: 5px; font-size: 0.9rem; color: var(--gray);">
                                        X轴: 初始温度 | Y轴: 吹炼时间 | 颜色: 误差大小
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 碳含量预测选项卡 -->
                <div class="tab-content" id="carbon-tab" style="display: none;">
                    <div class="chart-container">
                        <div class="chart-placeholder">
                            <i class="fas fa-chart-line" style="font-size: 2rem; margin-bottom: 10px; color: var(--primary-color);"></i>
                            <div>碳含量预测实际值与预测值对比图</div>
                            <div style="margin-top: 5px; font-size: 0.9rem; color: var(--gray);">
                                X轴: 样本序号 | Y轴: 碳含量(%) | 蓝线: 预测值 | 灰线: 实际值
                            </div>
                        </div>
                    </div>
                    
                    <!-- 碳含量预测相关内容... -->
                </div>
                
                <!-- 时间预测选项卡 -->
                <div class="tab-content" id="time-tab" style="display: none;">
                    <!-- 时间预测相关内容... -->
                </div>
                
                <!-- 综合性能选项卡 -->
                <div class="tab-content" id="overall-tab" style="display: none;">
                    <!-- 综合性能相关内容... -->
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <div class="card-title">
                        <i class="fas fa-code-branch"></i>
                        模型版本对比
                    </div>
                </div>
                
                <div class="table-container">
                    <table class="performance-table">
                        <thead>
                            <tr>
                                <th>版本</th>
                                <th>温度RMSE</th>
                                <th>碳含量RMSE</th>
                                <th>时间准确率</th>
                                <th>推理时间</th>
                                <th>发布日期</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><span class="status-badge active">v3.2.1 (当前)</span></td>
                                <td>±8.63℃</td>
                                <td>±0.0076%</td>
                                <td>92.4%</td>
                                <td>120ms</td>
                                <td>2023-05-20</td>
                            </tr>
                            <tr>
                                <td>v3.1.5</td>
                                <td>±9.84℃</td>
                                <td>±0.0083%</td>
                                <td>87.8%</td>
                                <td>185ms</td>
                                <td>2023-04-12</td>
                            </tr>
                            <tr>
                                <td>v3.0.0</td>
                                <td>±12.35℃</td>
                                <td>±0.0092%</td>
                                <td>84.5%</td>
                                <td>210ms</td>
                                <td>2023-02-28</td>
                            </tr>
                            <tr>
                                <td>v2.5.2</td>
                                <td>±15.67℃</td>
                                <td>±0.0115%</td>
                                <td>80.2%</td>
                                <td>250ms</td>
                                <td>2022-12-10</td>
                            </tr>
                            <tr>
                                <td>v2.0.0</td>
                                <td>±18.92℃</td>
                                <td>±0.0142%</td>
                                <td>76.5%</td>
                                <td>320ms</td>
                                <td>2022-09-05</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script src="scripts/unified.js"></script>
    <script src="scripts/modal-dialog.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 选项卡切换
            const tabBtns = document.querySelectorAll('.tab-btn');
            const tabContents = document.querySelectorAll('.tab-content');
            
            tabBtns.forEach(btn => {
                btn.addEventListener('click', () => {
                    // 移除所有活动状态
                    tabBtns.forEach(b => b.classList.remove('active'));
                    tabContents.forEach(c => c.style.display = 'none');
                    
                    // 添加当前活动状态
                    btn.classList.add('active');
                    const tabId = btn.getAttribute('data-tab') + '-tab';
                    document.getElementById(tabId).style.display = 'block';
                });
            });
            
            // 数据集选择
            const datasetBtns = document.querySelectorAll('.dataset-btn');
            
            datasetBtns.forEach(btn => {
                btn.addEventListener('click', () => {
                    // 移除所有活动状态
                    datasetBtns.forEach(b => b.classList.remove('active'));
                    
                    // 添加当前活动状态
                    btn.classList.add('active');
                    
                    // 这里可以添加切换数据集的逻辑
                    const dataset = btn.getAttribute('data-dataset');
                    console.log('切换到数据集:', dataset);
                    
                    // 模拟数据集切换，简单更新一些值
                    if (dataset === 'validation') {
                        document.querySelector('.metrics-container .metric-value:nth-child(2)').textContent = '±9.12℃';
                        document.querySelector('.metrics-container .metric-value:nth-child(5)').textContent = '±0.0081%';
                        document.querySelector('.metrics-container .metric-value:nth-child(8)').textContent = '90.8%';
                        showMessage('已切换到验证集数据视图', 'info');
                    } else if (dataset === 'production') {
                        document.querySelector('.metrics-container .metric-value:nth-child(2)').textContent = '±10.35℃';
                        document.querySelector('.metrics-container .metric-value:nth-child(5)').textContent = '±0.0093%';
                        document.querySelector('.metrics-container .metric-value:nth-child(8)').textContent = '88.3%';
                        showMessage('已切换到生产数据视图', 'info');
                    } else {
                        document.querySelector('.metrics-container .metric-value:nth-child(2)').textContent = '±8.63℃';
                        document.querySelector('.metrics-container .metric-value:nth-child(5)').textContent = '±0.0076%';
                        document.querySelector('.metrics-container .metric-value:nth-child(8)').textContent = '92.4%';
                        showMessage('已切换到测试集数据视图', 'info');
                    }
                });
            });

            // 添加性能图表交互功能
            setupPerformanceCharts();
            
            // 导出按钮点击事件
            const exportBtn = document.querySelector('.btn-secondary');
            if (exportBtn && exportBtn.textContent.includes('导出')) {
                exportBtn.addEventListener('click', function() {
                    showMessage('正在准备导出性能报告...', 'info');
                    
                    setTimeout(() => {
                        showMessage('性能报告已成功导出到您的下载文件夹', 'success');
                    }, 1500);
                });
            }
        });

        // 模拟设置性能图表
        function setupPerformanceCharts() {
            // 为图表占位符添加交互效果
            const chartPlaceholders = document.querySelectorAll('.chart-placeholder');
            
            chartPlaceholders.forEach(placeholder => {
                placeholder.addEventListener('mouseenter', function() {
                    this.style.backgroundColor = 'rgba(0, 0, 0, 0.04)';
                });
                
                placeholder.addEventListener('mouseleave', function() {
                    this.style.backgroundColor = 'rgba(0, 0, 0, 0.02)';
                });
                
                placeholder.addEventListener('click', function() {
                    // 查找图表标题
                    let title = '图表详情';
                    const parent = this.closest('.card-content');
                    if (parent) {
                        const cardHeader = parent.previousElementSibling;
                        if (cardHeader) {
                            const cardTitle = cardHeader.querySelector('.card-title');
                            if (cardTitle) {
                                title = cardTitle.textContent.trim();
                            }
                        }
                    }
                    
                    // 显示详情弹窗
                    showDetailDialog(title, `
                        <div class="chart-detail">
                            <div class="chart-large-placeholder">
                                <i class="fas fa-chart-line"></i>
                                <p>详细图表将在这里显示</p>
                            </div>
                            <div class="chart-description">
                                <h4>图表说明</h4>
                                <p>该图表展示了模型在不同条件下的性能表现，横轴表示数据点，纵轴表示相应的指标值。</p>
                                <p>通过分析图表趋势，可以发现模型性能的变化规律，为模型优化提供依据。</p>
                            </div>
                        </div>
                        <style>
                            .chart-detail {
                                display: flex;
                                flex-direction: column;
                                gap: 20px;
                            }
                            .chart-large-placeholder {
                                height: 300px;
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                justify-content: center;
                                background-color: rgba(0,0,0,0.02);
                                border-radius: 8px;
                            }
                            .chart-large-placeholder i {
                                font-size: 64px;
                                color: #aaa;
                                margin-bottom: 15px;
                            }
                            .chart-description h4 {
                                margin-bottom: 10px;
                                color: var(--primary-dark);
                            }
                            .chart-description p {
                                margin-bottom: 10px;
                                line-height: 1.6;
                            }
                        </style>
                    `, 'large');
                });
            });
            
            // 添加预测误差分布交互
            const errorBars = document.querySelectorAll('.error-bar');
            
            errorBars.forEach(bar => {
                bar.addEventListener('mouseenter', function() {
                    this.style.opacity = '0.8';
                });
                
                bar.addEventListener('mouseleave', function() {
                    this.style.opacity = '1';
                });
                
                bar.addEventListener('click', function() {
                    const item = this.closest('.error-item');
                    if (item) {
                        const range = item.querySelector('.error-range').textContent;
                        const value = item.querySelector('.error-value').textContent;
                        
                        showDetailDialog(`误差分布: ${range}`, `
                            <div class="error-detail">
                                <div class="error-summary">
                                    <div class="summary-item">
                                        <div class="summary-label">误差范围</div>
                                        <div class="summary-value">${range}</div>
                                    </div>
                                    <div class="summary-item">
                                        <div class="summary-label">样本占比</div>
                                        <div class="summary-value">${value}</div>
                                    </div>
                                </div>
                                
                                <div class="chart-placeholder">
                                    <i class="fas fa-chart-bar"></i>
                                    <p>误差详细分布图</p>
                                </div>
                                
                                <div class="error-analysis">
                                    <h4>误差分析</h4>
                                    <p>在${range}误差范围内的样本占总体的${value}，主要分布在特定工况下。这部分样本的特点是...</p>
                                    
                                    <h4>改进建议</h4>
                                    <p>针对该误差范围的样本，建议通过以下方式优化模型：</p>
                                    <ul>
                                        <li>增加该范围内的训练样本数量</li>
                                        <li>优化特征工程，增强对该工况的表达能力</li>
                                        <li>针对性调整模型结构，提高特定工况下的预测精度</li>
                                    </ul>
                                </div>
                            </div>
                            <style>
                                .error-detail {
                                    display: flex;
                                    flex-direction: column;
                                    gap: 20px;
                                }
                                .error-summary {
                                    display: flex;
                                    justify-content: space-around;
                                    padding: 15px;
                                    background-color: rgba(0,0,0,0.02);
                                    border-radius: 8px;
                                }
                                .summary-label {
                                    font-size: 14px;
                                    color: #666;
                                    margin-bottom: 5px;
                                }
                                .summary-value {
                                    font-size: 24px;
                                    font-weight: 700;
                                    color: var(--primary);
                                }
                                .chart-placeholder {
                                    height: 200px;
                                    display: flex;
                                    flex-direction: column;
                                    align-items: center;
                                    justify-content: center;
                                    background-color: rgba(0,0,0,0.02);
                                    border-radius: 8px;
                                }
                                .chart-placeholder i {
                                    font-size: 48px;
                                    color: #aaa;
                                    margin-bottom: 15px;
                                }
                                .error-analysis h4 {
                                    margin: 15px 0 10px;
                                    color: var(--primary-dark);
                                }
                                .error-analysis p, .error-analysis ul {
                                    margin-bottom: 15px;
                                    line-height: 1.6;
                                }
                                .error-analysis li {
                                    margin-bottom: 8px;
                                }
                            </style>
                        `, 'medium');
                    }
                });
            });
        }
    </script>

    <style>
        /* 模型性能页面的优化样式 */
        .dataset-selector {
            display: flex;
            background-color: rgba(0, 0, 0, 0.03);
            padding: 5px;
            border-radius: 8px;
            margin-left: auto;
            margin-right: 15px;
        }
        
        .dataset-btn {
            border: none;
            background: none;
            padding: 8px 15px;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 500;
            color: var(--gray-dark);
            transition: all 0.2s;
        }
        
        .dataset-btn:hover {
            background-color: rgba(0, 0, 0, 0.05);
        }
        
        .dataset-btn.active {
            background-color: white;
            color: var(--primary);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        
        /* 改进的指标卡片样式 */
        .metrics-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 20px;
            margin-bottom: 25px;
        }
        
        .metric-card {
            background: white;
            border-radius: var(--radius);
            box-shadow: var(--shadow-sm);
            padding: 20px;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .metric-card:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow);
        }
        
        .metric-card:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            height: 3px;
            width: 100%;
            background: linear-gradient(to right, var(--primary), var(--primary-light));
        }
        
        .metric-icon {
            background-color: rgba(25, 118, 210, 0.1);
            color: var(--primary);
            width: 45px;
            height: 45px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            margin-bottom: 15px;
        }
        
        .metric-value {
            font-size: 28px;
            font-weight: 700;
            color: var(--primary-dark);
            margin-bottom: 5px;
        }
        
        .metric-label {
            color: var(--gray);
            margin-bottom: 10px;
        }
        
        .metric-trend {
            display: flex;
            align-items: center;
            font-size: 0.85rem;
            font-weight: 500;
        }
        
        .metric-trend.up {
            color: var(--success-color);
        }
        
        .metric-trend.down {
            color: var(--success-color);
        }
        
        .metric-trend i {
            margin-right: 5px;
        }
        
        /* 改进的标签页样式 */
        .tabs {
            display: flex;
            border-bottom: 1px solid rgba(0, 0, 0, 0.08);
            margin-bottom: 20px;
            overflow-x: auto;
            padding-bottom: 2px;
        }
        
        .tab-btn {
            padding: 12px 20px;
            background: none;
            border: none;
            border-bottom: 3px solid transparent;
            font-weight: 500;
            color: var(--gray);
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;
        }
        
        .tab-btn:hover {
            color: var(--primary);
            background-color: rgba(0, 0, 0, 0.02);
        }
        
        .tab-btn.active {
            color: var(--primary);
            border-bottom-color: var(--primary);
        }
        
        /* 改进的图表容器样式 */
        .chart-container {
            background-color: rgba(0, 0, 0, 0.02);
            border-radius: var(--radius);
            height: 300px;
            position: relative;
            margin-bottom: 25px;
            transition: all 0.2s;
            cursor: pointer;
        }
        
        .chart-placeholder {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
        }
        
        .chart-title {
            font-weight: 600;
            font-size: 16px;
            color: var(--primary-dark);
            margin: 25px 0 15px;
        }
        
        .chart-title i {
            margin-right: 8px;
            color: var(--primary);
        }
        
        /* 改进的误差分布样式 */
        .error-distribution {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 25px;
        }
        
        .error-item {
            display: flex;
            align-items: center;
        }
        
        .error-range {
            width: 80px;
            font-size: 14px;
            color: var(--gray-dark);
        }
        
        .error-bar-container {
            flex: 1;
            height: 10px;
            background-color: rgba(0, 0, 0, 0.05);
            border-radius: 5px;
            overflow: hidden;
            margin: 0 15px;
        }
        
        .error-bar {
            height: 100%;
            background: linear-gradient(to right, var(--primary), var(--primary-light));
            border-radius: 5px;
            transition: width 0.5s, opacity 0.2s;
        }
        
        .error-value {
            width: 40px;
            font-weight: 600;
            color: var(--primary-dark);
            text-align: right;
        }
        
        /* 改进的表格样式 */
        .performance-table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .performance-table th,
        .performance-table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }
        
        .performance-table th {
            font-weight: 600;
            color: var(--gray-dark);
            background-color: rgba(0, 0, 0, 0.02);
        }
        
        .performance-table tr:hover {
            background-color: rgba(0, 0, 0, 0.01);
        }
        
        /* 响应式布局调整 */
        @media (max-width: 768px) {
            .grid-2 {
                display: grid;
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .dataset-selector {
                margin: 15px 0;
                width: 100%;
                justify-content: center;
            }
            
            .header {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .header-right {
                margin-top: 15px;
                justify-content: flex-start;
            }
        }
    </style>
</body>
</html> 